<template>
	<view class="Login">
		<view class="content">
			<view class="title">
				美食用户端
			</view>
			<view class="login_box_box" v-if="LoginStatus">
				<u--input placeholder="邮箱" prefixIcon="email" style="margin: 30rpx;" v-model="email"
					prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				<u--input placeholder="密码" prefixIcon="lock" style="margin: 30rpx;" v-model="pwd" :password="true"
					prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				<u-button type="primary" text="登录" style="margin-top: 50rpx;margin-bottom: 20rpx;width: 90%;" @click="SubmitLogin">
				</u-button>
				<span class="register_text" @click="LoginStatus = false">立即注册</span>
			</view>
			<view class="login_box_box" v-else>
				<u--input placeholder="用户名" prefixIcon="account" style="margin: 30rpx;" v-model="name"
					prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				<u--input placeholder="邮箱" prefixIcon="email" style="margin: 30rpx;" v-model="email"
					prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				<u--input placeholder="密码" prefixIcon="lock" style="margin: 30rpx;" v-model="pwd" :password="true"
					prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				<u--input placeholder="确认密码" prefixIcon="lock-fill" style="margin: 30rpx;" v-model="twoPwd" :password="true"
					prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				<u-button type="primary" text="注册账号" style="margin-top: 50rpx;margin-bottom: 20rpx;width: 90%;" @click="SubmitRegister">
				</u-button>
				<span class="register_text" @click="LoginStatus = true">返回登录</span>
			</view>
		</view>
	</view>
</template>

<script>
	import http from "../../static/http.js"
	export default {
		data() {
			return {
				LoginStatus: true,
				email:"",
				pwd:"",
				name:"",
				twoPwd:""
			}
		},
		methods: {
			SubmitLogin(){
				let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
				if(!reg.test(this.email)){
					uni.showToast({
						title:"请检查邮箱！",
						icon:"none"
					})
				}else if(!this.pwd){
					uni.showToast({
						title:"请检查密码！",
						icon:"none"
					})
				}else{
					http.httpRequest("/api/user/login",{email:this.email,pwd:this.pwd},"POST").then(res=>{
						uni.setStorageSync("token",res.data)
						uni.showToast({
							title:"登录成功！",
							icon:"success"
						})
						setTimeout(()=>{
							uni.switchTab({
								url:"/pages/index/index"
							})
						},500)
					})
				}
			},
			SubmitRegister(){
				let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
				if(!this.name){
					uni.showToast({
						title:"请检查用户名！",
						icon:"none"
					})
				}else if(!reg.test(this.email)){
					uni.showToast({
						title:"请检查邮箱！",
						icon:"none"
					})
				}else if(!this.pwd){
					uni.showToast({
						title:"请检查密码！",
						icon:"none"
					})
				}else if(this.twoPwd != this.pwd){
					uni.showToast({
						title:"密码不一致！",
						icon:"none"
					})
				}else{
					http.httpRequest("/api/user/register",{email:this.email,pwd:this.pwd,name:this.name},"POST").then(res=>{
						uni.showToast({
							title:"注册成功，请登录！",
							icon:"success"
						})
						this.LoginStatus = true
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.Login {
		width: 100%;
		height: 100vh;
		background-color: #f0f0f5;
		position: relative;

		.content {
			width: 500rpx;
			height: auto;
			background-color: #fff;
			position: absolute;
			top: 30%;
			left: 50%;
			transform: translate(-50%, -30%);

			.title {
				width: 100%;
				height: 80rpx;
				background-color: #f7f7f7;
				line-height: 80rpx;
				font-weight: 600;
				text-align: center;
			}

			.login_box_box {
				width: 100%;
				height: calc(100% - 80rpx);
				border-radius: 10rpx;

				.register_text {
					font-size: 25rpx;
					padding: 10rpx;
				}
			}
		}
	}
</style>
